<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>九宫格布局示例</title>
  <!-- 引入Element UI的CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.0/dist/index.css">
  <!-- 引入Vue和Element UI的JS -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/element-plus@2.4.0/dist/index.full.min.js"></script>
  <style>
    /* 整体容器样式 */
   .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background-color: #0000CD; /* 整体蓝色背景 */
      padding: 10px;
      box-sizing: border-box;
    }

    /* 顶部区域样式 */
   .header {
      display: flex;
      height: 80px;
      background-color: #FFC107; /* 亮黄色 */
      border: 2px solid white;
      margin-bottom: 10px;
    }

    /* 顶部左右两个黄色模块 */
   .header-left, .header-right {
      flex: 1;
      background-color: #FFC107; /* 亮黄色 */
      border: 2px solid #0000CD; /* 蓝色边框 */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }

    /* 中间区域样式 */
   .main {
      flex: 1;
      background-color: #0000CD; /* 蓝色背景 */
      border: 2px solid white;
      margin-bottom: 10px;
      padding: 5px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 5px;
    }

    /* 中间九宫格每个格子样式 */
   .grid-item {
      background-color: #FFC107; /* 亮黄色 */
      border: 2px solid #0000CD; /* 蓝色边框 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
    }

    /* 底部区域样式 */
   .footer {
      height: 60px;
      background-color: #0000CD; /* 蓝色 */
      border: 2px solid white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="app" class="container">
    <!-- 顶部区域 -->
    <el-header class="header">
      <div class="header-left">顶部左侧</div>
      <div class="header-right">
        <el-dropdown>
          <el-button type="primary" size="small">
            <span>系统菜单</span>
            <el-icon><el-icon-arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><el-icon-user /></el-icon>
                <span>用户管理</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><el-icon-document /></el-icon>
                <span>报表管理</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><el-icon-tools /></el-icon>
                <span>系统设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <el-icon><el-icon-arrow-right-circle /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    
    <!-- 中间区域 -->
    <el-main class="main">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </el-main>
    
    <!-- 底部区域 -->
    <el-footer class="footer">
      <span>底部蓝色模块</span>
    </el-footer>
  </div>

  <script>
    const { createApp } = Vue;
    const { ElHeader, ElMain, ElFooter, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElIcon, ElIconArrowDown, ElIconUser, ElIconDocument, ElIconTools, ElIconArrowRightCircle } = ElementPlus;

    const app = createApp({});

    // 注册Element UI组件
    app.component('ElHeader', ElHeader);
    app.component('ElMain', ElMain);
    app.component('ElFooter', ElFooter);
    app.component('ElDropdown', ElDropdown);
    app.component('ElDropdownMenu', ElDropdownMenu);
    app.component('ElDropdownItem', ElDropdownItem);
    app.component('ElButton', ElButton);
    app.component('ElIcon', ElIcon);
    app.component('ElIconArrowDown', ElIconArrowDown);
    app.component('ElIconUser', ElIconUser);
    app.component('ElIconDocument', ElIconDocument);
    app.component('ElIconTools', ElIconTools);
    app.component('ElIconArrowRightCircle', ElIconArrowRightCircle);

    app.mount('#app');
  </script>
</body>

</html>